<template>
  <view class="tab-list-view">
    <view class="header">
      <slot name="header"></slot>
      <tabs :tabs="tabs" :tab-index="tabIndex" @tabClick="tabClick" />
    </view>
    <swiper class="content" :style="{'min-height': height}" :current="tabIndex" @change="swiperChange">
      <slot name="list"></slot>
    </swiper>
  </view>
</template>
<script>
import tabs from '../tabs/index'
import './index.scss'
export default {
  name: 'TabListView',
  components: {
    tabs
  },
  props: {
    tabs: {
      type: Array,
      default() { return [] }
    },
    tabIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      height: '375px'
    }
  },
  created() {
    this.height = uni.getSystemInfoSync().windowHeight + 'px'
  },
  methods: {
    tabClick(index) {
      this.$emit('tabClick', index)
    },
    swiperChange(e) {
      this.$emit('tabClick', e.detail.current)
    }
  }
}
</script>
